---
layout: default
---
{% assign t = site.data.locales[page.lang][page.lang] %}

{% if page.lang and page.lang != "en" %}
{% assign lang_dir = page.lang | prepend: "/" %}
{% endif %}

<div class="bg-gray mb-6 border-bottom jumbotron px-3">
  <div class="container-lg px-3">
    <div class="d-md-flex flex-wrap flex-items-center">
      <div class="col-7 col-sm-5 mx-auto mb-4 text-center text-md-left">
        <img alt="best practices" src="{{ site.baseurl }}/assets/images/best-practices.svg" class="img-responsive">
      </div>
      <div class="col-md-7 pl-md-6 text-center text-md-left">
        <h1 class="alt-h1 mb-2">
          {{ t.maintainers.title }}
        </h1>
        <p class="alt-lead text-gray mb-md-5">
          {{ t.maintainers.description }}
        </p>
      </div>
    </div>
  </div>
</div>

<div class="container-lg clearfix mx-auto gutter-spacious py-md-6 text-center">
  <h2 class="alt-h2">
    {{ t.maintainers.involve.title }}
  </h2>
  <p class="alt-lead text-gray col-md-8 mx-auto mb-6">
    {{ t.maintainers.involve.description }}
  </p>
  <div class="mb-6 col-md-6 float-md-left">
    <img alt="reduce workload" src="{{ site.baseurl }}/assets/images/reduce-workload.svg" class="img-responsive mb-3" height="100px">
    <h3 class="alt-h3 mb-2">
      {{ t.maintainers.involve.workload.title }}
    </h3>
    <p class="text-gray">
      {{ t.maintainers.involve.workload.description }}
    </p>
  </div>
  <div class="mb-6 col-md-6 float-md-left">
    <img alt="promote work" src="{{ site.baseurl }}/assets/images/promote-work.svg" class="img-responsive mb-3" height="100px">
    <h3 class="alt-h3 mb-2">
      {{ t.maintainers.involve.promote.title }}
    </h3>
    <p class="text-gray">
      {{ t.maintainers.involve.promote.description }}
    </p>
  </div>
</div>

<div class="py-6 px-3 text-center border-top border-bottom bg-gray-light">
  <div class="container-lg clearfix mx-auto gutter-spacious py-md-6 text-center">
    <h2 class="alt-h2">
      {{ t.maintainers.growing.title }}
    </h2>
    <p class="alt-lead text-gray col-md-8 mx-auto mb-6">
      {{ t.maintainers.growing.description }}
    </p>
    <div class="mb-6 col-md-6 float-md-left">
      <img alt="document everything" src="{{ site.baseurl }}/assets/images/document-everything.svg" class="img-responsive mb-3" height="100px">
      <h3 class="alt-h3 mb-2">
        {{ t.maintainers.growing.document.title }}
      </h3>
      <p class="text-gray">
        {{ t.maintainers.growing.document.description }}
      </p>
    </div>
    <div class="mb-6 col-md-6 float-md-left">
      <img alt="get help" src="{{ site.baseurl }}/assets/images/get-help.svg" class="img-responsive mb-3" height="100px">
      <h3 class="alt-h3 mb-2">
        {{ t.maintainers.growing.help.title }}
      </h3>
      <p class="text-gray">
        {{ t.maintainers.growing.help.description }}
      </p>
    </div>
  </div>
</div>

<div class="container-lg clearfix mx-auto gutter-spacious py-md-6 text-center">
  <h2 class="alt-h2 mt-4">
    {{ t.maintainers.workflow.title }}
  </h2>
  <p class="alt-lead text-gray col-md-8 mx-auto mb-6">
    {{ t.maintainers.workflow.description }}
  </p>
  <div class="mb-6 col-md-6 float-md-left">
    <img alt="set boundaries" src="{{ site.baseurl }}/assets/images/set-boundaries.svg" class="img-responsive mb-3" height="100px">
    <h3 class="alt-h3 mb-2">
      {{ t.maintainers.workflow.boundaries.title }}
    </h3>
    <p class="text-gray">
      {{ t.maintainers.workflow.boundaries.description }}
    </p>
  </div>
  <div class="mb-6 col-md-6 float-md-left">
    <img alt="automation" src="{{ site.baseurl }}/assets/images/automation.svg" class="img-responsive mb-3" height="100px">
    <h3 class="alt-h3 mb-2">
      {{ t.maintainers.workflow.automation.title }}
    </h3>
    <p class="text-gray">
      {{ t.maintainers.workflow.automation.description }}
    </p>
  </div>
</div>

<div class="py-6 text-center border-top bg-gray-light">
  <div class="container-md pt-3">
    <h2 class="alt-h2 text-center">
      {{ t.maintainers.visitor.title }}
    </h2>

    <p class="text-gray alt-lead">
      {{ t.maintainers.visitor.description }}
    </p>
  </div>
</div>

<div class="border-top py-5">
  <div class="container-lg">
    <h2 class="alt-h2 mt-6 text-center">
      {{ t.endorsement.title }}
    </h2>
    <div class="mt-3 pb-6">
      <div class="d-flex flex-wrap flex-items-stretch gutter">
        <div class="col-md-6">
          <aside class="pquote height-full">
            <img src="https://avatars.githubusercontent.com/Rich-Harris?s=180" class="pquote-avatar" alt="avatar">
            {{ t.endorsement.Rich_Harris.message }}
            <p markdown="1" class="pquote-credit">
              &mdash;
              {{ t.endorsement.Rich_Harris.name }}
              (<a href="https://github.com/Rich-Harris">@Rich-Harris</a>)
              <br>
              {{ t.endorsement.Rich_Harris.title }}
            </p>
          </aside>
        </div>
        <div class="col-md-6">
          <aside class="pquote height-full">
            <img src="https://avatars.githubusercontent.com/brettcannon?s=180" class="pquote-avatar" alt="avatar">
            {{ t.endorsement.Brett_Cannon.message }}
            <p markdown="1" class="pquote-credit">
              &mdash;
              {{ t.endorsement.Brett_Cannon.name }}
              (<a href="https://github.com/brettcannon">@brettcannon</a>)
              <br>
              {{ t.endorsement.Brett_Cannon.title }}
            </p>
          </aside>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="py-3 border-top text-center">
  <div class="container-lg">
    <div class="d-flex gutter flex-column flex-sm-row mx-2 my-6">
      <div class="col-lg-4 mx-auto">
        <h2 class="alt-h3 my-2">
          <a href="{{ lang_dir }}/businesses">
            {{ t.Businesses }}
            {% include chevron-right.html %}
          </a>
        </h2>
        <p class="text-gray f4">
          {{ t.headline.businesses }}
        </p>
      </div>
      <div class="col-lg-4 mx-auto">
        <h2 class="alt-h3 my-2">
          <a href="{{ lang_dir }}/#participate">
            {{ t.Contributors }}
            {% include chevron-right.html %}
          </a>
        </h2>
        <p class="text-gray f4">
          {{ t.headline.contributors }}
        </p>
      </div>
    </div>
  </div>
</div>
